<template>
  <div ref="mapDom" class="map-container"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

// 地图实例
let map = null

// map的dom
const mapDom = ref()

// marker的实例
let marker = null

// 高德地图的实例
let AMap = null

// 地图
let geocoder = null

const initMap = async () => {
  window._AMapSecurityConfig = {
    securityJsCode: 'd28f5e83b4cc1c14996a57a78dfcf109'
  }
  AMap = await AMapLoader.load({
    key: 'e5c7886a9d2653aa5e8730c266feefe2', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Geocoder'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
  map = new AMap.Map(mapDom.value, {
    // 设置地图容器id
    viewMode: '3D', // 是否为3D地图模式
    resizeEnable: true, // 传入resizeEnable，不传center，则按照城市来定位
    zoom: 11 // 初始化地图级别
    // center: [116.397428, 39.90923], // 初始化地图中心点位置
  })
  // 地图点击事件
  map.on('click', (e) => {
    console.log(e.lnglat.toArray())
    addMarker(e.lnglat.toArray())
  })
  // 地址换经纬度插件
  geocoder = new AMap.Geocoder({})
}

// 新增marker或者更改定位地点
function addMarker(position) {
  if (!marker) {
    marker = new AMap.Marker({
      icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
      position,
      offset: new AMap.Pixel(-20, -50)
    })
    marker.setMap(map)
  } else {
    marker.setPosition(position)
  }
}

function geoCode(address) {
  geocoder.getLocation(address, (status, result) => {
    if (status === 'complete' && result.geocodes.length) {
      var lnglat = result.geocodes[0].location
      addMarker(lnglat)
      map.setFitView(marker)
    } else {
      console.error('根据地址查询位置失败')
    }
  })
}

onMounted(() => {
  initMap()
})
</script>
<style lang="less" scoped>
.map-container {
  height: 100%;
}
</style>
